.box {
  width: 100%;
  height: 600px;
  padding: 50px;
  box-sizing: border-box;
  display: flex;
}
.box img {
  width: 100%;
  height: 100%;
}
.box-left {
  width: 400px;
  height: 500px;
  margin-right: 50px;
  position: relative;
}
.box .top {
  width: 400px;
  height: 400px;
  background-color: lightskyblue;
  margin-bottom: 20px;
}
.box .visibleArea {
  position: absolute;
  top: 0px;
  left: 450px;
  z-index: 99;
  overflow: hidden;
}
.box .bigbox {
  width: 800px;
  height: 800px;
  position: absolute;
}
.box .bigbox img {
  width: 100%;
  height: 100%;
}
.mask {
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 0, 0.3);
  position: absolute;
  left: 0px;
  top: 0px;
  display: none;
}
.visibleArea {
  display: none;
}
.box .bot {
  width: 400px;
  display: flex;
  justify-content: space-around;
}
.box .bot div {
  width: 70px;
  height: 70px;
  box-sizing: border-box;
}
.box .bot div:hover {
  border: 2px rgb(252, 10, 10) solid;
}
.box-right {
  width: 700px;
  height: 500px;
  box-sizing: border-box;
  padding: 50px;
}
.box-right dd {
  line-height: 56px;
}
.box-right .dd1 a {
  border: 1px gray solid;
  margin: 0 10px;
  padding: 5px 10px;
  box-sizing: border-box;
}
.box-right .dd1 a:hover {
  border-color: rgb(226, 130, 5);
  font-weight: bold;
}
.box-right dl .dd2 {
  width: 100px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: white;
  cursor: pointer;
}
.cart {
  background-color: tomato;
  margin-bottom: 20px;
}
.mecart {
  background-color: rgb(44, 209, 99);
}
.cart:hover {
  background-color: rgb(235, 52, 19);
}
.mecart:hover {
  background-color: rgb(4, 155, 54);
}
dl {
  position: relative;
}
.sp1 {
  position: absolute;
  top: 320px;
  left: 120px;
  color: greenyellow;
  font-weight: bold;
  display: none;
}
